<template>
  <div>
    <el-dialog title="警告:回溯题目将会修改题库" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="为确保是管理员输入，请输入管理员手机号码">
          <el-input v-model="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="updateSql" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="题目信息" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="account"
          label="反馈者"
          width="150"
        ></el-table-column>
        <el-table-column
          property="question"
          label="问题"
          width="200"
        ></el-table-column>
        <el-table-column property="item1" label="选项A"></el-table-column>
        <el-table-column property="item2" label="选项B"></el-table-column>
        <el-table-column property="item3" label="选项C"></el-table-column>
        <el-table-column property="item4" label="选项D"></el-table-column>
        <el-table-column property="answer" label="答案"></el-table-column>
        <el-table-column
          property="reviseTime"
          label="修改时间"
        ></el-table-column>
      </el-table>
      <el-button @click="dialogTableVisible = false">取 消</el-button>
      <el-button type="primary" @click="updateForRevise">回 溯</el-button>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="_id" label="_id" width="180"> </el-table-column>
      <el-table-column prop="account" label="账号" width="180">
      </el-table-column>
      <el-table-column prop="question" label="问题"> </el-table-column>
      <el-table-column prop="selectLib" label="科目"> </el-table-column>
      <el-table-column prop="reviseTime" label="修订时间"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="pageChangeHandler"
      layout="prev, pager, next"
      :total="1000"
    >
    </el-pagination>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import feedBackApi from "@/api/tiku/feedback";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      tableData: [],
      currentPage: 1, //页面数，默认是第一页
      dialogTableVisible: false,
      gridData: [],
      dialogFormVisible: false,
      password: 0,
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    getRevise: async function () {
      let revise = await feedBackApi.getRevise(this.currentPage);
      console.log(revise);
      let data = revise.data.data;
      this.tableData = [];
      for (let i = 0; i < data.length; i++) {
        const element = data[i];
        const obj = JSON.parse(element);
        let {
          _id,
          account,
          answer,
          item1,
          item2,
          item3,
          item4,
          question,
          reviseTime,
          selectLib,
          time,
        } = obj;
        this.tableData.push({
          _id,
          account,
          answer,
          item1,
          item2,
          item3,
          item4,
          question,
          reviseTime,
          selectLib,
          time,
        });
      }
    },
    pageChangeHandler: async function (e) {
      console.log(e);
      this.currentPage = e;
      this.getRevise();
    },
    handleClick: async function (e) {
      this.dialogTableVisible = true;
      let {
        selectLib,
        question,
        answer,
        item1,
        item2,
        item3,
        item4,
        _id,
        reviseTime,
        account,
      } = e;
      this.gridData[0] = {
        selectLib,
        question,
        answer,
        item1,
        item2,
        item3,
        item4,
        _id,
        reviseTime,
        account,
      };
    },
    updateForRevise: async function () {
        this.dialogFormVisible=true
    },
    updateSql: async function () {
      console.log(this.password);
      if (this.password != 18527307932) {
        this.$message.error("输入密码错误");
        return;
      }
      console.log(this.gridData[0]);
      let { selectLib, question, answer, item1, item2, item3, item4, _id } =
        this.gridData[0];
      let revise = await feedBackApi.updateForRevise({
        selectLib,
        question,
        answer,
        item1,
        item2,
        item3,
        item4,
        _id,
      });
      console.log(revise);
      if(revise.code!=20000){
         this.$message.error("更新失败");
         return
      }else{
        this.$message({
          message: "更新成功",
          type: "success",
        });
         this.getRevise();
        //刷新页面
        window.location.reload();
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getRevise();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>